<template>
    <div style="width: 100%;min-width:880px">
        <div class="top">
            <div class="top-c">
                <div class="search">
                    <el-input size="normal" v-model="pagination.name" class="input" clearable
                              @keyup.enter.native="getSceneList('name')" placeholder="请输入需要查找的场景名称"
                              @clear="clearSearch" style="width: 400px" prefix-icon="el-icon-search"></el-input>
                    <el-button size="normal" type="primary" @click="getSceneList('name')">查找</el-button>
                </div>
                <el-button size="normal" icon="el-icon-plus" type="primary" @click="sceneModal=true">创建场景</el-button>
            </div>
        </div>
        <div class="sceneList">
            <div class="top-t">
                <a :class="active===''?'active':''" href="#" @click="getSceneList('')">全部</a>
                <a :class="active===0?'active':''" href="#" @click="getSceneList(0)">测试</a>
                <!--<a :class="active===1?'active':''" href="#" @click="getSceneList(1)">未开始</a>-->
                <a :class="active===2?'active':''" href="#" @click="getSceneList(2)">已发布</a>
                <a :class="active===3?'active':''" href="#" @click="getSceneList(3)">已结束</a>
            </div>
            <div v-show="sceneList.length>0" class="scene" v-for="scene in sceneList" :key="scene.sceneId">
                <div class="scene-top">
                    <div class="man">
                        <div>上限人数：<span>{{scene.maxPerson}}</span></div>
                        <div>签到人数：<span>{{scene.signInPerson}}</span></div>
                        <div>参与互动：<span>{{scene.huDongPerson}}</span></div>
                    </div>
                    <div class="date" v-if="scene.startTime&&scene.endTime">
                        <div>{{scene.startTime| datetimeFilter}}</div>
                        <span>至</span>
                        <div>{{scene.endTime| datetimeFilter}}</div>
                    </div>
                    <div class="del">
                        <el-switch v-model="scene.active" active-text=" " active-color="#13ce66"
                                   inactive-color="#eeeeee" inactive-text="活动开关">
                        </el-switch>
                        <i class="el-icon-document-copy" @click="copyScene(scene)"></i>
                        <i class="el-icon-delete" @click="delScene(scene)"></i>
                    </div>
                </div>
                <div class="scene-bottom">
                    <div class="scene-img">
                        <div class="bg" :style="{backgroundImage:'url('+scene.defaultBg+')'}"></div>
                        <div class="tip" :class="getClass(scene.useStatus)">{{getText('use',scene.useStatus)}}
                        </div>
                    </div>
                    <div class="scene-info">
                        <div class="scene-name">{{scene.name}}</div>
                        <div class="scene-btn">
                            <div class="scene-setting">
                                <div v-for="menu in iconMenus" :key="menu.path" class="text-ic"
                                     @click="jumpTo(menu,scene.sceneId)">
                                    <i :class="menu.icon"></i>
                                    <div>{{menu.text}}</div>
                                </div>
                                <div class="line text-ic"></div>
                                <div class="text-ic" @click="preview(scene)">
                                    <i class="iconfont ss-screen"></i>
                                    <div>大屏幕</div>
                                </div>
                                <div class="text-ic" @click="codeVisiable = scene.sceneId">
                                    <i class="iconfont ss-game"></i>
                                    <div>互动小程序</div>
                                </div>
                                <!--<el-popover placement="left" width="250" trigger="hover"-->
                                <!--popper-class="smallProgramCode">-->
                                <!--<div style="text-align: center">-->
                                <!--<div style="text-align: center">小程序码</div>-->
                                <!--<img style="width: 200px;height: 200px"-->
                                <!--:src="sourceHost+'/staticft/images/xcx/'+scene.sceneId+'.png'" alt="">-->
                                <!--</div>-->
                                <!---->
                                <!--</el-popover>-->
                            </div>
                        </div>

                    </div>
                    <div class="scene-ac">
                        <el-button type="primary" @click="showModal(scene)">
                            {{getText('pay',scene.useStatus)}}
                        </el-button>
                        <div>
                            <el-switch v-model="scene.lock" active-text=" " active-color="#13ce66"
                                       inactive-color="#eeeeee" inactive-text="账号绑定">
                            </el-switch>
                            <el-tooltip content="预览场景是否需要验证账号" placement="top">
                                <i class="iconfont ss-wenhao" style="cursor: pointer"></i>
                            </el-tooltip>

                        </div>
                    </div>
                </div>

            </div>
            <div v-show="sceneList.length<=0&&active===''" style="padding: 20px;color: #cccccc;font-size: 12px">
                暂时没有活动场景，请点击右上角的“创建场景”开始您的活动
            </div>
            <div class="pagination">
                <el-pagination v-if="pagination.total>10" :total="pagination.total" :page-size="pagination.pageSize"
                               :current-page="pagination.index" @current-change="pageChange"></el-pagination>
            </div>
        </div>

        <modal title="创建活动场景" :visible="sceneModal" :width="650" @close="sceneModal=false">
            <createScene :getSceneList="getSceneList" :closeModal="()=>{sceneModal=false}"></createScene>
        </modal>
        <modal title="发布场景" :visible="activeSceneId" :width="650" @close="activeSceneId=false">
            <activeScene :getSceneList="getSceneList" :scene="opScene"
                         :closeModal="()=>{activeSceneId=false}"></activeScene>
        </modal>
        <modal title="场景拷贝" :visible="copySceneId" :width="550" :top="150" @close="copySceneId=false">
            <copyScene :scene="opScene" :getSceneList="getSceneList"
                       :closeModal="()=>{copySceneId=false}"></copyScene>
        </modal>
        <modal title="场景升级" :visible="updateSceneId" :width="550" :top="150" @close="updateSceneId=false">
            <updatePersonNum :scene="opScene" :closeModal="()=>{updateSceneId=false}"
                             :getSceneList="getSceneList"></updatePersonNum>
        </modal>
        <modal title="小程序码" :visible="!!codeVisiable" :width="350" :top="150" @close="codeVisiable=false">
            <div style="text-align: center">
                <div style="text-align: center;color: #aaa;padding: 10px">微信扫描小程序码</div>
                <img style="width: 200px;height: 200px" :src="sourceHost+'/staticft/images/xcx/'+codeVisiable+'.png'"
                     alt="">
                <div style="text-align: center;margin: 20px">
                    <el-button style="width: 100px;border-radius: 20px;" type="primary" @click="codeVisiable=false">确认
                    </el-button>
                </div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { getRouterInfoByType } from '../../../router/routerInfo';
    import payment from '../payment/payment';
    import createScene from './viewPart/createScene';
    import activeScene from '../payment/activeScene';
    import copyScene from './viewPart/copyModal';
    import updatePersonNum from '../payment/updatePersonNum';
    import env from '@/utils/env';

    export default {
        name: 'sceneList',
        components: {
            payment,
            createScene,
            activeScene,
            copyScene,
            updatePersonNum,
        },
        data() {
            return {
                sceneModal: false,
                iconMenus: [
                    { text: '功能设置', icon: 'iconfont ss-chilun', path: '/baseSetting/baseSettings' },
                    { text: '消息审核', icon: 'iconfont ss-shenhe', path: '/sceneManage/messageReview' },
                    { text: '奖励兑换', icon: 'iconfont ss-ticket', path: '/sceneManage/prizeExchange' },
                    { text: '数据统计', icon: 'iconfont ss-data', path: '/sceneManage/dataStatistics' },
                ],
                sceneList: [],
                modelType: false,
                pagination: {
                    name: '',
                    pageSize: 10,
                    index: 1,
                    useStatus: null,
                    total: 0,
                },
                active: '',
                activeSceneId: false,
                copySceneId: false,
                updateSceneId: false,
                opScene: {},
                sourceHost: 'http://www.office2.cn',
                codeVisiable: '',
            };
        },

        mounted() {
            this.getSceneList('');
            this.$bus.$on('refreshScenes', () => {
                this.getSceneList('');
            });
        },

        methods: {
            showModal(scene) {
                switch (scene.useStatus) {
                    case 0:
                        // '发布';
                        this.activeSceneId = true;
                        break;
                    case 1:
                        //  '未开始';
                        break;
                    case 2:
                        // '正在进行';
                        this.updateSceneId = true;
                        break;
                    case 3:
                        //  '已结束';
                        // this.updateSceneId = scene.sceneId;
                        break;
                }
                this.opScene = Object.assign({}, scene);
            },
            jumpTo(menu, sceneId) {
                this.$router.push({ path: menu.path, query: { sceneId } });
            },
            getText(type, status) {
                let text = '';
                if (type === 'use') {
                    switch (status) {
                        case 0:
                            text = '测试中';
                            break;
                        case 1:
                            text = '未开始';
                            break;
                        case 2:
                            text = '正在进行';
                            break;
                        case 3:
                            text = '已结束';
                            break;
                        case 4:
                            text = '关闭';
                            break;
                    }
                } else if (type = 'pay') {
                    switch (status) {
                        case 0:
                            text = '正式发布';
                            break;
                        case 1:
                            text = '已支付';
                            break;
                        case 2:
                            text = '升级';
                            break;
                        case 3:
                            text = '已结束';
                            break;
                        case 4:
                            text = '已退款';
                            break;
                    }
                }
                return text;
            },
            getClass(status) {
                let icon = '';
                switch (status) {
                    case 0:
                        icon = 'iconfont ss-sandclock color-test';
                        break;
                    case 1:
                        icon = 'iconfont ss-sandclock color-test';
                        break;
                    case 2:
                        icon = 'iconfont ss-run  color-run';
                        break;
                    case 3:
                        icon = 'iconfont ss-coffee  color-stop';
                        break;
                    case 4:
                        icon = 'iconfont ss-coffee  color-stop';
                        break;
                }
                return icon;
            },
            closePayment(refresh) {
                this.modelType = false;
                refresh === 1 ? this.getSceneList() : null;
            },
            getSceneList(status) {
                if (status === 'page') {

                } else if (status === 'name') {
                    this.pagination.index = 1;
                } else if (status === undefined) {
                    this.active = '';
                    this.pagination.index = 1;
                } else {
                    this.active = status;
                    this.pagination.index = 1;
                }
                let p = this.pagination;
                let param = {
                    index: p.index, pageSize: 10, name: p.name, useStatus: this.active,
                };
                this.$api.post('/st_scene/query', param, success => {
                    this.sceneList = success.result;
                    this.pagination.total = success.totalCount;
                    sessionStorage.setItem('sceneList', JSON.stringify(success.result));
                }, fal => {
                    this.$message.error(fal);
                });
            },
            pageChange(curPage) {
                this.pagination.index = curPage;
                this.getSceneList('page');
            },
            clearSearch() {
                this.pagination.index = 1;
                this.getSceneList('');
            },
            delScene(scene) {
                this.$confirm('确定删除场景：' + scene.name + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.$api.get('/st_scene/del', { sceneId: scene.sceneId }, success => {
                        this.$message.success('删除成功');
                        this.getSceneList();
                    }, fal => {
                        this.$message.error(fal);
                    });
                }).catch(() => {

                });
            },
            copyScene(scene) {
                this.opScene = scene;
                this.copySceneId = scene.sceneId;
            },
            // preview(scene) {
            //     window.open(env.sourceHost + '/staticmb/v/' + scene.sceneCode);
            // },
            preview(scene) {
                //在桌面客户端环境下,使用electron api打开新的窗口
                if (window.deskTopApi) {
                    const { ipcRenderer } = window.deskTopApi.electron;
                    const messageInfos = {
                        type: 'newWindow',
                        options: {
                            url: env.sourceHost + '/staticmb/v/' + scene.sceneCode,
                        },
                    };
                    ipcRenderer.send('asynchronous-message', messageInfos);
                } else {
                    window.open(env.sourceHost + '/staticmb/v/' + scene.sceneCode);
                }
            },
        },
    };
</script>

<style scoped lang="scss">
    .top {
        .top-c {
            @include flex-bt;
            margin: 20px;
            .search {
                display: flex;
                .input {
                    /deep/ .el-input__inner {
                        padding: 0 40px;
                        border-radius: 0;
                        @include left-radius(20px);
                    }
                    /deep/ .el-input__prefix {
                        left: 15px;
                    }
                }
                button {
                    border-radius: 0;
                    @include right-radius(30px);
                    width: 80px;
                    border: none;
                }
            }
            & > button {
                border-radius: 20px;
                width: 300px;
                background: linear-gradient(226deg, #0A32E6 0%, #BC19FA 100%);
                border: none;
            }
            & > button:hover {
                background: linear-gradient(226deg, #0a34f1 0%, #c019ff 100%);
                box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.20);
            }
        }

    }

    .sceneList {
        transition: all .3s;
        border-radius: $radius-main;
        background: #FFFFFF;
        margin: 20px;
        min-height: 500px;
        .top-t {
            padding: 15px;
            border-bottom: 1px solid #eeeeee;
            a {
                padding: 15px;
                font-size: 14px;
                position: relative;
            }

            a.active {
                @include color-blue;
            }
            a.active:after {
                content: ' ';
                border-bottom: 2px solid $color-blue;
                display: inline-block;
                position: absolute;
                bottom: -1px;
                animation: animation .5s;
                animation-fill-mode: forwards;
                @keyframes animation {
                    0% {
                        width: 0;
                        left: 50%;
                    }
                    100% {
                        width: 100%;
                        left: 0;
                    }
                }
            }
        }
        .scene {
            overflow: hidden;
            margin: 20px 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #efefef;
            position: relative;
            .scene-top {
                @include flex-bt;
                margin: 10px 0;
                & > div {
                    @include flex-bt;
                    font-size: 14px;
                    color: #8B8C9A;
                    div {
                        margin: 0 10px;
                    }
                }
                padding-right: 10px;
            }
            .scene-bottom {
                display: flex;
                justify-content: space-between;
                padding: 10px 5px;
                .scene-img {
                    width: 220px;
                    height: 140px;
                    position: relative;
                    overflow: hidden;
                    border-radius: 10px;
                    /*border: 1px solid #eeeeee;*/
                    box-shadow: 0 0 2px 2px #eeeeee;
                    .bg {
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                    .tip {
                        position: absolute;
                        width: 100%;
                        font-size: 14px;
                        text-align: center;
                        left: 0;
                        bottom: 0;
                        padding: 10px 0;
                        background: rgba(0, 0, 0, .75);
                    }
                }
                .scene-info {
                    width: calc(100% - 380px);
                    padding: 0 20px;
                    height: 140px;
                    .scene-name {
                        font-size: 18px;
                        color: #333333;
                        margin: 10px 0;
                        padding: 0 10px;
                        height: 50px;
                        font-weight: bold;
                    }
                    .scene-btn {
                        max-width: 1000px;
                        margin: 10px 0;
                        .scene-setting {
                            @include flex-bt;
                            margin: 10px 0;
                            div.text-ic {
                                text-align: center;
                                white-space: nowrap;
                                margin: 10px;
                                width: 60px;
                                cursor: pointer;
                                i {
                                    font-size: 24px;
                                    transition: all .3s linear;
                                    cursor: pointer;
                                    color: #888888;
                                }
                                & > div {
                                    transition: all .2s linear;
                                    margin: 10px 0;
                                    font-size: 12px;
                                    color: #888888;
                                }

                            }
                            span .text-ic {
                                margin: 0 20px 0 0;
                            }
                            div.text-ic:hover {
                                i {
                                    color: $color-blue;
                                    /*transform: scale(1.5);*/
                                }
                                div {
                                    color: $color-blue;
                                }
                            }
                            .line.text-ic {
                                width: 20px;
                                height: 60px;
                                margin-top: -10px;
                                border-right: 1px solid #ddd;
                            }
                        }
                        .scene-game {
                            @include flex-bt;
                            height: 100%;
                        }
                    }
                }
                .scene-ac {
                    width: 150px;
                    text-align: center;
                    button {
                        margin: 30px 0 30px;
                        width: 100px;
                        border-radius: 20px;
                    }
                    & > div {
                        @include flex-ad;
                        justify-content: center;
                        margin: 21px 0 0;
                    }
                }
            }
            .del {
                @include flex;
                max-width: 350px;
                text-align: center;
                white-space: nowrap;
                i {
                    cursor: pointer;
                    font-weight: bold;
                    transition: all .2s;
                    padding: 0 10px;
                    font-size: 20px;
                }
                i.el-icon-delete {
                    color: #d81e06;
                }
                i.el-icon-document-copy {
                    color: #009588;
                }
            }
        }
    }

    .color-test {
        color: #FFB81B;
    }

    .color-run {
        color: #4EECCF;
    }

    .color-stop {
        color: #EB4A40;
    }

    .pagination {
        padding: 20px;
        text-align: right;
    }
</style>